﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="wap-font-scale" content="no">
  <title>Wheel</title>
  <link rel="stylesheet" href="css/layout.css">
  <script src="js/jquery.js"></script>
  <script src="js/common.js"></script>
  <script src="js/main.js"></script>
  <!--[if lt IE 9]><script src="//cdn.bootcss.com/rem/1.3.4/js/rem.min.js"></script><script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->
</head>

<body>

  <!-- Loading -->
  <div class="loading-w"><div class="loading"><div class="box box1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="box box2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="box box3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div><strong>Loading <div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></strong></div>
  
  <main>
    <h1>
      <strong class="abs wh1 dfcc">
        <i class="dfccs">W - B<span>My Wheels</span></i>
      </strong>
    </h1>  
    <div class="wrap pt50 pb50 pl35 pr35 clearfix">
      <!-- 内页模块 -->
      <div class="title fb tac mb50"><i>内页模块</i></div>
      <div class="wb-plugin md-12">
        <div class="box">
          <h2>常用参数方法</h2>
          <div class="wb-info pt50 pb50">
            <div class="li30 f16 fb dflrs">
              <div>
                $('.xxx').slick({<br>
                　fade: true, // 淡入淡出<br>
                　vertical: true, //垂直方向<br>
                　autoplay: true, // 自动播放<br>
                　speed: 800, // 过度速度<br>
                　draggable: false, //启用桌面拖动<br>
                　dots: true, // 圆点<br>
                　adaptiveHeight: true, //自动高度<br>
                　touchThreshold: 10, //滑动切换阈值，即滑动多少像素后切换<br>
                　slidesToShow: 2, // 显示个数<br>
                　slidesToScroll: 2, // 滚动个数<br>
                });
              </div>
              <br><br>
              <div>
                $('.xxx').slick('unslick');<br>
                unslick() // 销毁 slick<br>
                slickNext() // 切换下一张<br>
                slickPrev() // 切换上一张<br>
                slickPause() // 暂停自动播放<br>
                slickPlay() // 开始自动播放<br>
                slickGoTo() // 切换到第 x 张<br>
                slickCurrentSlide() // 返回当前幻灯片索引<br>
              </div>

              <!-- $('.xxx').slick({
              fade: true, // 淡入淡出
              vertical: true, //垂直方向
              autoplay: true, // 自动播放
              speed: 800, // 过度速度
              draggable: false, //启用桌面拖动
              dots: true, // 圆点
              adaptiveHeight: true, //自动高度
              touchThreshold: 10, //滑动切换阈值，即滑动多少像素后切换
              slidesToShow: 2, // 显示个数
              slidesToScroll: 2, // 滚动个数
              });
              $('.xxx').slick('unslick');
              unslick() // 销毁 slick
              slickNext() // 切换下一张
              slickPrev() // 切换上一张
              slickPause() // 暂停自动播放
              slickPlay() // 开始自动播放
              slickGoTo() // 切换到第 x 张
              slickCurrentSlide() // 返回当前幻灯片索引 -->
            </div>
          </div>
        </div>
        <div class="box">
          <h2>弹出层按钮</h2>
          <div class="wb-info pt50 pb50">
            <div class="dflrs">
              <a href="javascript:;" class="video-open" vurl="http://design.35.com/Web/style/video/20170627.mp4">测试视频1</a>
              <a href="javascript:;" class="pic-open">图片按钮
                <img src="testimg/banner.jpg" alt="" class="dn">
              </a>
              <a href="javascript:;" class="video-open" vurl="http://www.w3school.com.cn/example/html5/mov_bbb.mp4">测试视频2</a>
            </div>

          </div>
        </div>
        <div class="box">
          <h2>TAB-选项卡</h2>
          <div class="wb-info pt50 pb50">

            <div class="tab-wrap">
              <ul class="tab-head clearfix">
                <li class="cur fl">Tab_按钮</li>
                <li class="fl">Tab_按钮</li>
              </ul>
              <ul class="tab-body">
                <li class="cur">
                  content_内容1
                </li>
                <li>
                  content_内容2
                </li>
              </ul>
            </div>

          </div>
        </div>
        <div class="box">
          <h2>页码</h2>
          <div class="wb-info pt30">

            <!--Page-->
            <div class="in-page tac pt20 pb50">
              <a href="">| &lt;</a>
              <a href="" class="upper">&lt;&lt;</a>
              <a href="" class="cur">1</a>
              <a href="">2</a>
              <a href="">3</a>
              <a href="" class="lower">&gt;&gt;</a>
              <a href="">| &gt;</a>
            </div>

          </div>
        </div>
        <!-- 在线客服 -->
        <less-style>
          .fix-bar {
            z-index:55;
            position:fixed; 
            right:0; 
            bottom:20%;
            .item{
              width: 50px;
              height: 51px;
              position: relative;
              border-bottom: 1px solid #ddd;
              &:nth-child(4){
                span{
                  background-image: url();
                  background-size: 26px;
                }
              }
              &:nth-child(3){
                span{
                  background-image: url();
                }
              }
              &:nth-child(2){
                span{
                  background-image: url();
                }
              }
              em,.imgs{
                position: absolute;
                color: #fff;
                top: 0;
                right: 0;
                width: 50px;
                height: 50px;
                overflow: hidden;
                line-height: 50px;
                white-space: nowrap;
                .tra(.8s);
                a{
                  color: #fff;
                }
                span{
                  width: 50px;
                  height: 50px;
                }
                i{
                  width: 100px;
                  text-align: center;
                }
              }
              &:hover{
                em{
                  width: 150px;
                }
              }
            }
            .pic,#gotop{
              height: 50px;
              width: 50px;
              cursor: pointer;
            }
            // 二维码
            .pic{
              background-image: url();
              // 微信图标
              // background-image: url();
              &:hover{
                .imgs{
                  .op1();
                  right: 100%;
                }
              }
              .imgs{
                .op0();
                z-index: -1;
                position: absolute;
                width: 100px;
                height: 100px;
                right: -200%;
                top: 0;
                background-color: #eee;
              }
            }
            // 返回顶部
            #gotop{
              text-align: center;
              color: #fff;
              line-height: 50px;
              font-size: 30px;
              font-weight: bold;
              font-family: 'SimSun';
              .zhuan(270deg);
              .tra();
            }
          }
          .fix-bar .item em span,.fix-bar .pic,#gotop{
            background-repeat: no-repeat;
            background-position: center;
          }
          // 默认颜色
          .fix-bar .item i,.fix-bar .item em span,.fix-bar .pic,#gotop{
            background-color: @ThemeColor;
          }
          // 悬浮的颜色
          .fix-bar .item:hover i,.fix-bar .item:hover em span,.fix-bar .pic:hover,#gotop:hover{
            background-color: #1273c5;
          }
        </less-style>
        <div class="fix-bar sm-dn">
          <div class="item pic"><div class="imgs"><img src="testimg/banner.jpg" alt=""></div></div>
          <div class="item"><em><a href="tel:400-123-4567"><span>&nbsp;</span><i>&nbsp;400-123-4567</i></a></em></div>
          <div class="item"><em><a href="tencent://message/?uin=3232833951&Menu=yes"><span>&nbsp;</span><i>&nbsp;联系客服</i></a></em></div>
          <div class="item"><em><a href="mailto:3232833951@qq.com"><span>&nbsp;</span><i>&nbsp;邮箱</i></a></em></div>
          <div id="gotop" class="dn">></div>
        </div>
      
      </div>
      <!-- 我的轮子 -->
      <div class="title fb tac mt50 mb50"><i>我的轮子</i></div>
      <div class="wb-plugin md-12">
        <div class="box">
          <h2>百度地图</h2>
          <div class="wb-info pt50 pb50">

            <style>
              .add {height: 200px;}
              .add img {max-width: inherit;}
            </style>
            <div class="add">
              <div id="allmap" style="width:100%;height: 100%;"></div>
            </div>
            <!--add js-->
            <script src="http://api.map.baidu.com/api?v=2.0&ak=Q0ZvAI1nsB5rNPxenTqrh59w"></script>
            <script>$(function(){var map=new BMap.Map("allmap");var point=new BMap.Point(118.182597,24.49408);map.centerAndZoom(point,15);var marker=new BMap.Marker(point);map.addOverlay(marker);map.enableScrollWheelZoom()});</script>
            
            <!-- 名称 + 描述 -->
            <!-- <script>$(function(){var map=new BMap.Map("allmap");var point=new BMap.Point(108.467659,21.563659);map.centerAndZoom(point,15);var marker=new BMap.Marker(point);map.addOverlay(marker);var opts={title:"公司名称",};var wb-infoWindow=new BMap.wb-infoWindow("公司描述",opts);map.openwb-infoWindow(wb-infoWindow,point)});</script> -->

          </div>
        </div>
        <div class="box">
          <h2>百度分享按钮</h2>
          <div class="wb-info pt50 pb50">

            <less-style>
              .bdsharebuttonbox{
                font-size: 0;
                text-align: center;
                a{
                  float: none;
                  display: inline-block;
                  width: 50px !important;
                  height: 50px !important;
                  margin: 0px!important;
                  padding: 0 !important;
                  .bg();
                  
                  background: #666 !important;
                  border-radius: 50%;
                }
              }
              .bd_weixin_popup{
                height: auto !important;
              }
            </less-style>
            <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1513248240994">
              <a style="background-image: url('')" href="javascript:;" data-cmd="weixin"></a>
              <a style="background-image: url('')" href="javascript:;" data-cmd="tsina"></a>
              <a style="background-image: url('')" href="javascript:;" data-cmd="qzone"></a>              
            </div>

            <script>window._bd_share_config={"share":{}};with(document){0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion="+~(-new Date()/3600000)]};</script>
  
          </div>
        </div>
        <div class="box">
          <h2>产品详情多图</h2>
          <div class="wb-info pt50 pb50">

            <less-style>
              .pic-slider-w{
                max-width: 600px;
                margin: 0 auto;
                .t-pic-slider{
                  border: 1px solid #bfbfbf;
                  margin-bottom: 20px;
                  .slick-slide{
                    li{
                      position: relative;
                      height: 350px;
                    }
                  }
                  // 圆点样式
                  .slick-dots{
                    display: none !important;
                    li{
                      &.slick-active,&:hover,&:focus{
                      }
                    }
                  }
                }
                .b-pic-slider{
                  padding: 0 40px;
                  .slick-slide{
                    padding: 0 5px;
                    li{
                      position: relative;
                      height: 100px;
                      border: 2px solid #eee;
                      cursor: pointer;
                    }
                  }
                  .slick-current{
                    li{
                      border-color: @ThemeColor;
                    }
                  }  
                  // 左右按钮
                  .slick-prev,.slick-next{
                    width: 30px;
                    height: 100%;
                    background: #ccc !important;
                  }
                  .slick-prev{
                    background: url(../images/b_pic_slider_l.png) no-repeat center;
                  }
                  .slick-next{
                    background: url(../images/b_pic_slider_r.png) no-repeat center;
                  }
                }
              }
            </less-style>
            <div class="pic-slider-w rel">
              <ul class="t-pic-slider">
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/pictest.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/pictest.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
              </ul>
              <ul class="b-pic-slider">
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/pictest.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/pictest.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
              </ul>
              <div id="imgzoom"></div>
            </div>

            <script src="plugin/js/ezplus.js"></script>
            <script>
              $(function () {
                $(".pic-slider-w .t-pic-slider").slick({speed:800,draggable:false,dots:true,adaptiveHeight:true,asNavFor:".b-pic-slider",});$(".pic-slider-w .b-pic-slider").slick({speed:800,draggable:false,adaptiveHeight:true,slidesToShow:3,slidesToScroll:1,asNavFor:".t-pic-slider",focusOnSelect:true,});
                // 放大镜
                function resize(){if($(window).width()>1200){$(".t-pic-slider img").ezPlus({zoomWindowPosition:"imgzoom",zoomWindowHeight:310,zoomWindowWidth:310,borderSize:1,borderColour:"#ccc",})}}resize();$(window).resize(function(){resize()});
              });
            </script>

          </div>
        </div>
        <div class="box">
          <h2>产品详情多图--上下切换</h2>
          <div class="wb-info pt50 pb50">
            <less-style>
              .pic-slider-w2{
                max-width: 600px;
                margin: 0 auto;
                .t-pic-slider{
                  .w(180px);
                  border: 1px solid #bfbfbf;
                  margin-bottom: 20px;
                  .slick-slide{
                    li{
                      position: relative;
                      height: 350px;
                    }
                  }
                  // 圆点样式
                  .slick-dots{
                    display: none !important;
                    li{
                      &.slick-active,&:hover,&:focus{
                      }
                    }
                  }
                }
                .b-pic-slider{
                  width: 150px;
                  .slick-list{
                    padding: 30px 0;
                  }
                  .slick-slide{
                    li{
                      position: relative;
                      margin: 5px 0;
                      height: 87px;
                      border: 2px solid #eee;
                      cursor: pointer;
                      padding: 10px 0;
                    }
                  }
                  .slick-current{
                    li{
                      border-color: @ThemeColor;
                    }
                  }  
                  // 左右按钮
                  .slick-prev,.slick-next{
                    width: 100%;
                    height: 30px;
                    top: inherit;
                    .tray(0);
                    background: #ccc !important;
                  }
                  .slick-prev{
                    left: inherit;
                    background: url(../images/b_pic_slider_t.png) no-repeat center;
                  }
                  .slick-next{
                    right: inherit;
                    bottom: 0;
                    background: url(../images/b_pic_slider_b.png) no-repeat center;
                  }
                }
              }
            </less-style>
            <div class="pic-slider-w2 rel clearfix">
              <ul class="t-pic-slider fl">
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/pictest.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/pictest.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
              </ul>
              <ul class="b-pic-slider fr">
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/pictest.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/pictest.jpg" alt="" class="po-auto"></li>
                <li><img src="testimg/banner.jpg" alt="" class="po-auto"></li>
              </ul>
            </div>

            <script>
              $(function () {
                $(".pic-slider-w2 .t-pic-slider").slick({
                  speed: 800,
                  draggable: false,
                  dots: true,
                  adaptiveHeight: true,
                  asNavFor: ".b-pic-slider",
                });
                $(".pic-slider-w2 .b-pic-slider").slick({
                  speed: 800,
                  draggable: false,
                  adaptiveHeight: true,
                  slidesToShow: 3,
                  slidesToScroll: 1,
                  vertical: true,
                  // centerMode: true,
                  // centerPadding:"50px",
                  asNavFor: ".t-pic-slider",
                  focusOnSelect: true,
                });
              });
            </script>

          </div>
        </div>
        <div class="box">
          <h2>3D-幻灯片</h2>
          <div class="wb-info pt50 pb50">

            <less-style>
              // 左右按钮
              .flipto-prev,.flipto-next{
                position: absolute;
                top: 50%;
                width: 50px;
                height: 50px;
                font-size: 0;
                .tray();
                background: rgba(0, 0, 0, .5);
              }
              .flipto-prev{
                left: 0;
              }
              .flipto-next{
                right: 0;
              }
              // 3D-偏移-左
              .flipster-carousel .flip-prev{
                -webkit-transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8);
                -moz-transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8);
                -o-transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8);
                -ms-transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8);
                transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8);
              }
              // 3D-偏移-右
              .flipster-carousel .flip-next{
                -webkit-transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8);
                -moz-transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8);
                -o-transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8);
                -ms-transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8);
                transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8);
              }
            </less-style>
            <div class="i-flipster ov">
              <ul class="carousel">
                <li>
                  <a href="" class="db">
                    <img src="testimg/pictest.jpg" alt="">
                  </a>
                </li>
                <li>
                  <a href="" class="db">
                    <img src="testimg/pictest.jpg" alt="">
                  </a>
                </li>
                <li>
                  <a href="" class="db">
                    <img src="testimg/pictest.jpg" alt="">
                  </a>
                </li>
                <li>
                  <a href="" class="db">
                    <img src="testimg/pictest.jpg" alt="">
                  </a>
                </li>
                <li>
                  <a href="" class="db">
                    <img src="testimg/pictest.jpg" alt="">
                  </a>
                </li>
              </ul>
            </div>
            <link rel="stylesheet" href="plugin/css/flipster.css">
            <script src="plugin/js/flipster.js"></script>            
            <script>$(function(){setTimeout(function(){$(".i-flipster").css("opacity","1");$(".i-flipster").flipster({itemContainer:"ul",itemSelector:"li",style:"carousel",start:0,enableKeyboard:true,enableMousewheel:false,enableTouch:true,enableNavButtons:true,onItemSwitch:function(){},})},100)});</script>

          </div>
        </div>
        <div class="box">
          <h2>瀑布流列表</h2>
          <div class="wb-info pt50 pb50">

            <ul id="masonry" class="wbs clearfix">
              <li class="lg-6" wb="fadeup">
                <a href="" class="db img-md tra">
                  <div class="imgs ov">
                    <img src="testimg/banner.jpg" alt="">
                  </div>
                </a>
              </li>
              <li class="lg-6" wb="fadeup">
                <a href="" class="db img-md tra">
                  <div class="imgs ov">
                    <img src="testimg/pictest.jpg" alt="">
                  </div>
                </a>
              </li>
              <li class="lg-6" wb="fadeup">
                <a href="" class="db img-md tra">
                  <div class="imgs ov">
                    <img src="testimg/pictest.jpg" alt="">
                  </div>
                </a>
              </li>
              <li class="lg-6" wb="fadeup">
                <a href="" class="db img-md tra">
                  <div class="imgs ov">
                    <img src="testimg/banner.jpg" alt="">
                  </div>
                </a>
              </li>
            </ul>
            <a class="btns tac f16 fb db" href="javascript:;">加载更多</a>

            <script src="plugin/js/masonry.js"></script>
            <script>
              $(function() {
                var $container=$("#masonry");$container.imagesLoaded(function(){$container.masonry({itemSelector:"li",isAnimated:true,})});
                // 加载更多
                $('.btns').on( 'click', function() {
                  var $items = $('<li class="lg-6" wb="fadeup"><a href="" class="db img-md tra"><div class="imgs ov"><img src="testimg/banner.jpg" alt=""></div></a></li>');
                  $container.append( $items ).masonry( 'appended', $items );
                });
              });
            </script>    
          </div>
        </div>
        <div class="box">
          <h2>走马灯</h2>
          <div class="wb-info pt50 pb50">

            <less-style>
              .seamless-slider{
                max-width: 650px;
                margin: 0 auto;
              }
              .str_wrap {
                overflow: hidden;
                //zoom: 1;
                width: 100%;
                font-size: 12px;
                line-height: 16px;
                position: relative;
                -moz-user-select: none;
                -khtml-user-select: none;
                user-select: none;
                background: #f6f6f6;
                white-space: nowrap;
                &.str_active{
                  background: #f1f1f1
                }
              }
              .str_move {
                white-space: nowrap;
                position: absolute;
                top: 0;
                left: 0;
                cursor: move;
                font-size: 0
              }
              .str_move_clone {
                display: inline-block;
                //display: inline;
                //zoom: 1;
                vertical-align: top;
                position: absolute;
                left: 100%;
                top: 0
              }
              .str_vertical .str_move_clone {
                left: 0;
                top: 100%
              }
              .str_down .str_move_clone {
                left: 0;
                bottom: 100%
              }
              .str_down .str_move,
              .str_vertical .str_move {
                white-space: normal;
                width: 100%
              }
              .noStop .str_move,
              .no_drag .str_move,
              .str_static .str_move {
                cursor: inherit
              }
              .str_wrap img {
                max-width: none !important
              }
            </less-style>
            <div class="seamless-slider">
              <div class="liMarquee str_wrap">
                <a href="">
                  <img src="testimg/pictest.jpg" alt="">
                </a>
                <a href="">
                  <img src="testimg/pictest.jpg" alt="">
                </a>
                <a href="">
                  <img src="testimg/pictest.jpg" alt="">
                </a>
              </div>
            </div>
            <script src="plugin/js/liMarquee.js"></script>
            <script>$(function(){setTimeout(function(){$(".liMarquee").liMarquee()},100)});</script>

          </div>
        </div>
        <div class="box">
          <h2>图片画廊-灯箱</h2>
          <div class="wb-info pt50 pb50">

            <less-style>
              .lg-outer .lg-thumb-item{
                border: 2px solid #333;
              }
              .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover{
                border-color: #fff;
              }
              .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item{
                position: relative;
              }
              .lg-outer .lg-thumb-item img{
                position: absolute;
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                object-fit:inherit;
              }
              .pic-see{
                border: 1px solid #ccc;
                li{
                  a{
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 3rem;
                  }
                  img{
                    position: absolute;
                    max-width: 100%;
                    max-height: 100%;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                  }
                }
                .owl-pagination{
                  display: none;
                }
                // 左右按钮
                .owl-buttons{
                }
                .owl-controls .owl-buttons div{
                  width: 56px;
                  height: 56px;
                }
                // 左-按钮
                .owl-controls .owl-buttons .owl-prev{
                  left: -137px;
                  background-image: url(../images/slider_slier_l.png);
                }
                // 右-按钮
                .owl-controls .owl-buttons .owl-next{
                  right: -137px;
                  background-image: url(../images/slider_slier_r.png);
                }
              }
            </less-style>
            <div class="pic-see">
              <ul class="clearfix">
                <li data-src="testimg/banner.jpg">
                  <a href="" class="db">
                    <img class="img-responsive" src="testimg/banner.jpg">
                  </a>
                </li>
                <li data-src="testimg/banner.jpg">
                  <a href="" class="db">
                    <img class="img-responsive" src="testimg/banner.jpg">
                  </a>
                </li>
                <li data-src="testimg/pictest.jpg">
                  <a href="" class="db">
                    <img class="img-responsive" src="testimg/pictest.jpg">
                  </a>
                </li>
              </ul>
            </div>
            <link rel="stylesheet" href="plugin/css/lightgallery.css">
            <script src="plugin/js/lightgallery.js"></script>
            <script>$(function(){var pic_see=$(".pic-see ul");pic_see.lightGallery();sliders(pic_see)});</script>

          </div>
        </div>
        <div class="box">
          <h2>手风琴</h2>
          <div class="wb-info pt50 pb50">

            <less-style>
              .Accordion { 
                position:relative;
                height:276px;
                overflow:hidden;
                >li{
                  position:absolute; 
                  top:0px; 
                  left:0px; 
                  background-size:cover;
                }
              }
            </less-style>
            <div>
              <ul class="Accordion">
                <li><a href="" class="db"><img src="testimg/pictest.jpg" alt="" class="wh1"></a></li>
                <li><a href="" class="db"><img src="testimg/pictest.jpg" alt="" class="wh1"></a></li>
                <li><a href="" class="db"><img src="testimg/pictest.jpg" alt="" class="wh1"></a></li>
              </ul>
            </div>
            <script src="plugin/js/Accordion.js"></script>
            <script>$(function(){$('.Accordion').Accordion({trigger: 'mouse'});});</script>

          </div>
        </div>
        <div class="box">
          <h2>数字跳动</h2>
          <div class="wb-info pt50 pb50">

            <div class="number-w">
              <span class="i-number">541058726</span>
              <span class="i-number">9999</span>
              <span class="i-number">6666</span>
            </div>
            <script>
              $(function(){
                var hTop = $(".number-w").offset().top + $(".number-w").height() - $(window).height() + 180;
                arr = [0, 0, 0, 0];
                arrAdd = [];
                arrList = $(".number-w").find(".i-number");
                for (var i = 0; i < arrList.length; i++) {
                  var num = Number(arrList[i].innerHTML);
                  var add = num / 10;
                  arrAdd.push(add);
                  arrList[i].innerHTML = arr[i]
                }
                var first = 0;
                $(window).scroll(function () {
                  if ($(window).scrollTop() >= hTop && first == 0) {
                    first++;
                    var time = 0;
                    var numAdd = setInterval(function () {
                      time++;
                      for (var j = 0; j < arrList.length; j++) {
                        arr[j] += arrAdd[j];
                        arrList[j].innerHTML = arr[j].toFixed(0)
                      }
                      if (time == 10) {
                        clearInterval(numAdd)
                      }
                    }, 100)
                  }
                });
              });
            </script>

          </div>
        </div>
        <div class="box">
          <h2>滚动条</h2>
          <div class="wb-info pt50 pb50 clearfix">

            <div class="content_2">
              <div class="tac f16 li30">
                滚动条效果
                <br> 滚动条效果
                <br> 滚动条效果
                <br> 滚动条效果
                <br> 滚动条效果
                <br> 滚动条效果
                <br> 滚动条效果
                <br>
              </div>
            </div>

            <link rel="stylesheet" href="plugin/css/mCustomScrollbar.css">
            <script src="plugin/js/mCustomScrollbar.js"></script>
            <script>
              $(window).load(function(){
                $(".content_2").mCustomScrollbar({
                  scrollInertia:150
                });
              });
            </script>

          </div>
        </div>
        <div class="box">
          <h2>Fullpage</h2>
          <div class="wb-info pt50 pb50">
            <a target="_blank" href="https://xunyin.top/public/wb1.1.2/plugin/fullpage.html" style="font-size: 2.5vh;" class="db tac fb mb50">Fullpage</a>
            <iframe width="100%" height="350px" frameborder="0" src="https://xunyin.top/public/wb1.1.2/plugin/fullpage.html"></iframe>
          </div>
        </div>
        <div class="box">
          <h2>Wow</h2>
          <div class="wb-info pt50 pb50">

            <ul class="wbs">
              <li class="pl5 pr5 lg-3 md-4 sm-6 wb slideInUp"><img src="testimg/banner.jpg" alt=""></li>
              <li class="pl5 pr5 lg-3 md-4 sm-6 wb slideInUp"><img src="testimg/banner.jpg" alt=""></li>
              <li class="pl5 pr5 lg-3 md-4 sm-6 wb slideInUp"><img src="testimg/banner.jpg" alt=""></li>
              <li class="pl5 pr5 lg-3 md-4 sm-6 wb slideInUp"><img src="testimg/banner.jpg" alt=""></li>
            </ul>
            <style>
              .slideInUp{
                animation: slideInUp ease-out .6s forwards;
                -webkit-animation: slideInUp ease-out .6s forwards;
              }
            </style>
            <script src="plugin/js/wow.js"></script>

          </div>
        </div>
        <div class="box">
          <h2>随机广告漂浮</h2>
          <div class="wb-info pt50 pb50">
        
            <less-style>
              .fix-ads {
                position: fixed;
                z-index: 999;
                width: 150px;
                height: 150px;
                .wb-info{
                  width: 100%;
                  height: 100%;
                }
                .close{
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 25px;
                  height: 25px;
                  line-height: 23px;
                  padding: 0 5px;
                  text-align: right;
                  font-size: 20px;
                  color: #fff;
                  background: rgba(0, 0, 0, .5);
                  &::before,
                  &::after{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 14px;
                    height: 2px;
                    background: #fff;
                    content: '';
                    .tra(.5s);
                    margin: -2px 0 0 -6px;
                    // .tray();
                  }
                  &::before{
                    .zhuan(45deg);
                  }
                  &::after{
                    .zhuan(-45deg);
                  }
                }
              }
            </less-style>
            <div class="fix-ads">
              <div class="wb-info">
                <img src="testimg/pictest.jpg" alt="">
              </div>
              <a href="javascript:;" class="close"></a>
            </div>
            <script>
              FloatAd(".fix-ads"); //调用          
              //广告漂浮窗口
              function FloatAd(selector) {
                var obj = $(selector);
                // if (obj.find(".wb-info").length == 0) return; //如果没有内容，不执行
                var windowHeight = $(window).height(); //浏览器高度
                var windowWidth = $(window).width(); //浏览器宽度
                var dirX = -1.5; //每次水平漂浮方向及距离(单位：px)，正数向右，负数向左，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果
                var dirY = -1; //每次垂直漂浮方向及距离(单位：px)，正数向下，负数向上，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果
                var delay = 30; //定期执行的时间间隔，单位毫秒
                obj.css({
                  left: windowWidth / 2 - obj.width() / 2 + "px",
                  top: windowHeight / 2 - obj.height() / 2 + "px"
                }); //把元素设置成在页面中间
                obj.show(); //元素默认是隐藏的，避免上一句代码改变位置视觉突兀，改变位置后再显示出来
                var handler = setInterval(move, delay); //定期执行，返回一个值，这个值可以用来取消定期执行
                obj.hover(function () { //鼠标经过时暂停，离开时继续
                  clearInterval(handler); //取消定期执行
                }, function () {
                  handler = setInterval(move, delay);
                });
                obj.find(".close").click(function () { //绑定关闭按钮事件
                  close();
                });
                $(window).resize(function () { //当改变窗口大小时，重新获取浏览器大小，以保证不会过界（飘出浏览器可视范围）或漂的范围小于新的大小
                  windowHeight = $(window).height(); //浏览器高度
                  windowWidth = $(window).width(); //浏览器宽度
                });
                function move() { //定期执行的函数，使元素移动
                  var currentPos = obj.position(); //获取当前位置，这是JQuery的函数，具体见：http://hemin.cn/jq/position.html
                  var nextPosX = currentPos.left + dirX; //下一个水平位置
                  var nextPosY = currentPos.top + dirY; //下一个垂直位置
                  // if (nextPosX >= windowWidth - obj.width()) { //这一段是本站特有的需求，当漂浮到右边时关闭漂浮窗口，如不需要可删除
                  //   close();
                  // }
                  if (nextPosX <= 0 || nextPosX >= windowWidth - obj.width()) { //如果达到左边，或者达到右边，则改变为相反方向
                    dirX = dirX * -1; //改变方向
                    nextPosX = currentPos.left + dirX; //为了不过界，重新获取下一个位置
                  }
                  if (nextPosY <= 0 || nextPosY >= windowHeight - obj.height() - 5) { //如果达到上边，或者达到下边，则改变为相反方向。            
                    dirY = dirY * -1; //改变方向
                    nextPosY = currentPos.top + dirY; //为了不过界，重新获取下一个位置
                  }
                  obj.css({
                    left: nextPosX + "px",
                    top: nextPosY + "px"
                  }); //移动到下一个位置
                }
                function close() { //停止漂浮，并销毁漂浮窗口
                  clearInterval(handler);
                  obj.remove();
                }
              }
            </script>

          </div>
        </div>

      </div>
    </div>
  </main>

  <!-- 常见效果 -->
  <less-style>
    /* 图标抖动 */
    transition-timing-function: cubic-bezier(.6, 4, .3, .8);
    -webkit-transition-timing-function: cubic-bezier(.6, 4, .3, .8);
    animation: gelatine .5s 1;
    -webkit-animation: gelatine .5s 1;

    @keyframes gelatine{from,to{transform:scale(1,1)}25%{transform:scale(.9,1.1)}50%{transform:scale(1.1,.9)}75%{transform:scale(.95,1.05)}from,to{transform:scale(1,1)}25%{transform:scale(.9,1.1)}50%{transform:scale(1.1,.9)}75%{transform:scale(.95,1.05)}}@-webkit-keyframes gelatine{from,to{-webkit-transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05)}from,to{-webkit-transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05)}}

    /* 背景扩散 */
    position: absolute;
    top: -0.5%;
    left: -0.5%;
    content: "";
    width: 101%;
    height: 102%;
    background: #fff;
    opacity: .5;
    border-radius: 50%;
    animation: bgzoom 1s both;
    -webkit-animation: bgzoom 1s both;

    @keyframes bgzoom{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}@-webkit-keyframes bgzoom{from{opacity:.5;-webkit-transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.3)}};

    /* 上下跳动图标 */    
    .animation-icon{
      position: absolute;
      left: 50%;
      bottom: 5.85%;
      width: 27px;
      height: 37px;
      background: url(../images/animation_icon.png) no-repeat center;
      .trax();
      animation: animation_icon .8s cubic-bezier(.445,.05,.55,.95) .2s infinite alternate;
      -webkit-animation: animation_icon .8s cubic-bezier(.445,.05,.55,.95) .2s infinite alternate;
    }

    @-webkit-keyframes animation_icon{0%{opacity:0;transform:translateY(-30%)}100%{transform:none}}@keyframes animation_icon{0%{opacity:0;-webkit-transform:translateY(-30%)}100%{opacity:1;-webkit-transform:none}}

  </less-style>
  
  <less-style>
    less-style{
      display: none;
    }
    .wrap {
      z-index: 99;
      position: relative;
      margin-top: 100vh;
      background: #fdfdfd;
    }
    h1{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 350px;
      height: 100vh;
      &::after{
        opacity: .5;
        .pter();
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../testimg/banner.jpg) no-repeat center;
        background-size: cover;
      }
      strong{
        z-index: 55;
        color: #fff;
        font-size: 50px;
        // font-family: '楷体';
        font-family: 'Georgia';
      }
      i{
        position: relative;
        width: 200px;
        height: 200px;
        font-size: 45px;
        &::before{
          z-index: -2;
          position: absolute;
          top: -0.5%;
          left: -0.5%;
          content: "";
          width: 100%;
          height: 100%;
          background: #fff;
          opacity: .5;
          border-radius: 50%;
          -webkit-animation: bgzoom 1.5s infinite;
          animation: bgzoom 1.5s infinite;
        }
        &::after{
          .pter();
          z-index: -1;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: rgba(0, 0, 0, .5);
          border: 1px solid rgba(255, 255, 255, .5);
          box-shadow: 0 0 30px rgba(255, 255, 255, .8);
        }
        span{
          font-size: 16px;
          padding-top: 2%;
        }
      }
    }
    .title{
      font-size: 40px;
      font-family: '楷体';
      i{
        position: relative;
        padding-bottom: 10px;
        &::after{
          .pter();
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2px;
          background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
          -webkit-animation: line 3s infinite;
          animation: line 3s infinite;
        }
      }
    }
    .wb-plugin{
      width: 55%;
      padding: 0;
      margin: 0 auto;
    }
    h2{
      position: relative;
      height: 60px;
      border-bottom: 1px solid #999;
      font-weight: 700;
      font-size: 30px;
      font-family: '楷体';
      line-height: 60px;
      cursor: pointer;
      overflow: hidden;
      .tra();
      &::before,
      &::after{
        position: absolute;
        top: 50%;
        right: 5px;
        width: 20px;
        height: 2px;
        background: #666;
        content: '';
        .tra(.5s);
        .tray();
      }
      &::before{
        background: #333;
        transform: rotate(45deg);
      }
      &::after{
        background: #333;
        transform: rotate(-45deg);
      }
      &.cur{
        &::before{
          background: #333;
          transform: rotate(0);
        }
        &::after{
          background: #333;
          transform: rotate(0);
        }
        &::before,
        &::after{
          // background: #fff;
        }
    }
    }
    // 视频图片按钮
    .pic-open,.video-open{
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #666;
      color: #fff;
      text-align: center;
      line-height: 120px;
      font-size: 16px;
    }
    @keyframes bgzoom{from{opacity:.2;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.3);transform:scale(1.3)}}
    @keyframes line {
      from {
          -webkit-transform: scale(1);
          transform: scale(1)
      }
      50%{
        -webkit-transform: scale(0);
        transform: scale(0)
      }
      to {
          -webkit-transform: scale(1);
          transform: scale(1)
      }
    }
  </less-style>
  <style>
    /* Loading */
    .noscroll,.noscroll body{height:100%;overflow:hidden}
    .loading-w{position:fixed;top:0;left:0;z-index:99999999;width:100%;height:100%;background:#fff}.loading-w .loading{position:absolute;top:-10%;right:0;bottom:0;left:0;margin:auto;width:40px;height:40px}.loading .box{position:absolute;width:100%;height:100%}.loading .box2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.box3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.loading .box3>div,.loading .box2>div,.loading .box3>div{position:absolute;width:11px;height:11px;border-radius:50%;background-color:#000;-webkit-animation:loading 1.2s infinite ease-in-out;animation:loading 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{bottom:0;left:0}.loading .box2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.loading .box3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.loading .box1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.loading .box2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.loading .box3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.loading .box1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.loading .box2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.loading .box3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.loading .box1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.loading .box2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.loading .box3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes loading{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes loading{0%,80%,100%{-webkit-transform:scale(0.0);transform:scale(0.0)}40%{-webkit-transform:scale(1.0);transform:scale(1.0)}}.loading-w strong{position:absolute;top:0;right:0;bottom:-20%;left:0;margin:auto;width:100%;height:28px;color:#333;text-align:center;font-weight:bold;font-size:20px;font-family:'Georgia'}.loading-w strong>div{display:inline-block;margin-left:5px;width:5px;height:5px;border-radius:100%;background-color:#333;-webkit-animation:bounce 1.4s infinite ease-in-out;animation:bounce 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.loading-w strong .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.loading-w strong .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@-webkit-keyframes bounce{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bounce{0%,80%,100%{-webkit-transform:scale(0.0);transform:scale(0.0)}40%{-webkit-transform:scale(1.0);transform:scale(1.0)}}

    less-style{display:none}.wrap{z-index:99;position:relative;margin-top:100vh;background:#fdfdfd}h1{position:fixed;top:0;left:0;width:100%;height:350px;height:100vh}h1::after{opacity:.5;position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url(testimg/banner.jpg) no-repeat center;background-size:cover}h1 strong{z-index:55;color:#fff;font-size:50px;font-family:'Georgia'}h1 i{position:relative;width:200px;height:200px;font-size:45px}h1 i::before{z-index:-2;position:absolute;top:-0.5%;left:-0.5%;content:"";width:100%;height:100%;background:#fff;opacity:.5;border-radius:50%;-webkit-animation:bgzoom 1.5s infinite;animation:bgzoom 1.5s infinite}h1 i::after{position:absolute;content:'';z-index:-1;left:0;top:0;width:100%;height:100%;border-radius:50%;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.5);box-shadow:0 0 30px rgba(255,255,255,0.8)}h1 i span{font-size:16px;padding-top:2%}.title{font-size:40px;font-family:'楷体'}.title i{position:relative;padding-bottom:10px}.title i::after{position:absolute;content:'';left:0;bottom:0;width:100%;height:2px;background-image:linear-gradient(-20deg, #b721ff 0, #21d4fd 100%);-webkit-animation:line 3s infinite;animation:line 3s infinite}.wb-plugin{width:55%;padding:0;margin:0 auto}h2{position:relative;height:60px;border-bottom:1px solid #999;font-weight:700;font-size:30px;font-family:'楷体';line-height:60px;cursor:pointer;overflow:hidden;transition:all .3s;-webkit-transition:all .3s}h2::before,h2::after{position:absolute;top:50%;right:5px;width:20px;height:2px;background:#666;content:'';transition:all .5s;-webkit-transition:all .5s;transform:translateY(-50%);-webkit-transform:translateY(-50%)}h2::before{background:#333;transform:rotate(45deg)}h2::after{background:#333;transform:rotate(-45deg)}h2.cur::before{background:#333;transform:rotate(0)}h2.cur::after{background:#333;transform:rotate(0)}.pic-open,.video-open{width:120px;height:120px;border-radius:50%;background:#666;color:#fff;text-align:center;line-height:120px;font-size:16px}@keyframes bgzoom{from{opacity:.2;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.3);transform:scale(1.3)}}@keyframes line{from{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}
    .bdsharebuttonbox{font-size:0}.bdsharebuttonbox a{float:left;width:50px!important;height:50px!important;margin:0!important;padding:0!important;background-repeat:no-repeat;background-position:center;background:#666!important;border-radius:50%}
    /* 多图1 */
    .pic-slider-w{max-width:600px;margin:0 auto}.pic-slider-w .t-pic-slider{border:1px solid #bfbfbf;margin-bottom:20px}.pic-slider-w .t-pic-slider .slick-slide li{position:relative;height:350px}.pic-slider-w .t-pic-slider .slick-dots{display:none!important}.pic-slider-w .b-pic-slider{padding:0 40px}.pic-slider-w .b-pic-slider .slick-slide{padding:0 5px}.pic-slider-w .b-pic-slider .slick-slide li{position:relative;height:100px;border:2px solid #eee;cursor:pointer}.pic-slider-w .b-pic-slider .slick-current li{border-color:#333}.pic-slider-w .b-pic-slider .slick-next,.pic-slider-w .b-pic-slider .slick-prev{width:30px;height:100%;background:#ccc!important}.pic-slider-w .b-pic-slider .slick-prev{background:url(../images/b_pic_slider_l.png) no-repeat center}.pic-slider-w .b-pic-slider .slick-next{background:url(../images/b_pic_slider_r.png) no-repeat center}
    /* 多图2 */
    .pic-slider-w2{max-width:600px;margin:0 auto}.pic-slider-w2 .t-pic-slider{width:calc(100% - 180px);border:1px solid #bfbfbf;margin-bottom:20px}.pic-slider-w2 .t-pic-slider .slick-slide li{position:relative;height:350px}.pic-slider-w2 .t-pic-slider .slick-dots{display:none!important}.pic-slider-w2 .b-pic-slider{width:150px}.pic-slider-w2 .b-pic-slider .slick-list{padding:30px 0}.pic-slider-w2 .b-pic-slider .slick-slide li{position:relative;margin:5px 0;height:87px;border:2px solid #eee;cursor:pointer;padding:10px 0}.pic-slider-w2 .b-pic-slider .slick-current li{border-color:#333}.pic-slider-w2 .b-pic-slider .slick-next,.pic-slider-w2 .b-pic-slider .slick-prev{width:100%;height:30px;top:inherit;transform:translateY(0);-webkit-transform:translateY(0);background:#ccc!important}.pic-slider-w2 .b-pic-slider .slick-prev{left:inherit;background:url(../images/b_pic_slider_t.png) no-repeat center}.pic-slider-w2 .b-pic-slider .slick-next{right:inherit;bottom:0;background:url(../images/b_pic_slider_b.png) no-repeat center}
    /* 放大镜 */
    .zoomLens{cursor:move !important}.ZoomContainer{overflow:hidden}#imgzoom{display:none;position:absolute;z-index:1;top:0;right:-320px;width:310px;height:310px;background:#fff}
    /* 无缝滚动 */
    .seamless-slider{max-width:650px;margin:0 auto}.str_wrap{overflow:hidden;width:100%;font-size:12px;line-height:16px;position:relative;-moz-user-select:none;-khtml-user-select:none;user-select:none;background:#f6f6f6;white-space:nowrap}.str_wrap.str_active{background:#f1f1f1}.str_move{white-space:nowrap;position:absolute;top:0;left:0;cursor:move;font-size:0}.str_move_clone{display:inline-block;vertical-align:top;position:absolute;left:100%;top:0}.str_vertical .str_move_clone{left:0;top:100%}.str_down .str_move_clone{left:0;bottom:100%}.str_down .str_move,.str_vertical .str_move{white-space:normal;width:100%}.noStop .str_move,.no_drag .str_move,.str_static .str_move{cursor:inherit}.str_wrap img{max-width:none !important}
    /* 图片查看器 */
    .lg-outer .lg-thumb-item{border:2px solid #333}.lg-outer .lg-thumb-item.active,.lg-outer .lg-thumb-item:hover{border-color:#fff}.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item{position:relative}.lg-outer .lg-thumb-item img{position:absolute;width:auto;height:auto;max-width:100%;max-height:100%;top:0;right:0;bottom:0;left:0;margin:auto;object-fit:inherit}.pic-see{border:1px solid #ccc}.pic-see li a{position:relative;display:block;width:100%;height:3rem}.pic-see li img{position:absolute;max-width:100%;max-height:100%;top:0;right:0;bottom:0;left:0;margin:auto}.pic-see .owl-pagination{display:none}.pic-see .owl-controls .owl-buttons div{width:56px;height:56px}.pic-see .owl-controls .owl-buttons .owl-prev{left:-137px;background-image:url(../images/slider_slier_l.png)}.pic-see .owl-controls .owl-buttons .owl-next{right:-137px;background-image:url(../images/slider_slier_r.png)}    
    /* 手风琴 */
    .Accordion{position:relative;height:276px;overflow:hidden}.Accordion>li{position:absolute;top:0;left:0;background-size:cover}
    /* 3D-幻灯片 */
    .flipto-prev,.flipto-next{position:absolute;top:50%;width:50px;height:50px;font-size:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);background:rgba(0,0,0,0.5)}.flipto-prev{left:0}.flipto-next{right:0}.flipster-carousel .flip-prev{-webkit-transform:translateX(-80%) translateZ(0) rotateY(0deg) scale(.8);-moz-transform:translateX(-80%) translateZ(0) rotateY(0deg) scale(.8);-o-transform:translateX(-80%) translateZ(0) rotateY(0deg) scale(.8);-ms-transform:translateX(-80%) translateZ(0) rotateY(0deg) scale(.8);transform:translateX(-80%) translateZ(0) rotateY(0deg) scale(.8)}.flipster-carousel .flip-next{-webkit-transform:translateX(80%) translateZ(0) rotateY(0deg) scale(.8);-moz-transform:translateX(80%) translateZ(0) rotateY(0deg) scale(.8);-o-transform:translateX(80%) translateZ(0) rotateY(0deg) scale(.8);-ms-transform:translateX(80%) translateZ(0) rotateY(0deg) scale(.8);transform:translateX(80%) translateZ(0) rotateY(0deg) scale(.8)}
    /* tab */
    .tab-head{height:50px;line-height:50px;overflow:hidden;background:#ccc;margin:0!important}.tab-head li{padding:0 20px;cursor:pointer}.tab-head li.cur{background:#009fe9;color:#fff}.tab-body{text-align:left;margin:0!important;padding-top:10px}.tab-body li{padding:0;height:0;opacity:0;overflow:hidden;margin:0;-webkit-transition:all .5s;transition:all .5s;margin-bottom:0}.tab-body li.cur{opacity:1;height:auto;overflow:visible}
    /* 滚动条 */    
    .content_2{
      float: left;
      width: 50%;
      height: 150px;
    }
    /* 瀑布流 */
    #masonry li{
      padding: 0 10px;
      margin-bottom: 0.2rem;
    }
    /* 在线客服 */
    .fix-bar{z-index:55;position:fixed;right:0;bottom:20%}.fix-bar .item{width:50px;height:51px;position:relative;border-bottom:1px solid #ddd}.fix-bar .item:nth-child(4) span{background-image:url();background-size:26px}.fix-bar .item:nth-child(3) span{background-image:url()}.fix-bar .item:nth-child(2) span{background-image:url()}.fix-bar .item em,.fix-bar .item .imgs{position:absolute;color:#fff;top:0;right:0;width:50px;height:50px;overflow:hidden;line-height:50px;white-space:nowrap;transition:all .8s;-webkit-transition:all .8s}.fix-bar .item em a,.fix-bar .item .imgs a{color:#fff}.fix-bar .item em span,.fix-bar .item .imgs span{width:50px;height:50px}.fix-bar .item em i,.fix-bar .item .imgs i{width:100px;text-align:center}.fix-bar .item:hover em{width:150px}.fix-bar .pic,.fix-bar #gotop{height:50px;width:50px;cursor:pointer}.fix-bar .pic{background-image:url()}.fix-bar .pic:hover .imgs{visibility:visible;opacity:1;right:100%}.fix-bar .pic .imgs{visibility:hidden;opacity:0;z-index:-1;position:absolute;width:100px;height:100px;right:-200%;top:0;background-color:#eee}.fix-bar #gotop{text-align:center;color:#fff;line-height:50px;font-size:30px;font-weight:bold;font-family:'SimSun';transform:rotate(270deg);-webkit-transform:rotate(270deg);transition:all .3s;-webkit-transition:all .3s}.fix-bar .item em span,.fix-bar .pic,#gotop{background-repeat:no-repeat;background-position:center}.fix-bar .item i,.fix-bar .item em span,.fix-bar .pic,#gotop{background-color:#333}.fix-bar .item:hover i,.fix-bar .item:hover em span,.fix-bar .pic:hover,#gotop:hover{background-color:#1273c5}
    /* Fullpage */
    iframe{
      border: 5px solid #333;
      border-radius: 5px;
    }
    /* 随机广告漂浮 */
    .fix-ads{position:fixed;z-index:999;width:150px;height:150px}.fix-ads .wb-info{width:100%;height:100%}.fix-ads .close{position:absolute;top:0;right:0;width:25px;height:25px;line-height:23px;padding:0 5px;text-align:right;font-size:20px;color:#fff;background:rgba(0,0,0,.5)}.fix-ads .close::after,.fix-ads .close::before{position:absolute;top:50%;left:50%;width:14px;height:2px;background:#fff;content:'';transition:all .5s;-webkit-transition:all .5s;margin:-2px 0 0 -6px}.fix-ads .close::before{transform:rotate(45deg);-webkit-transform:rotate(45deg)}.fix-ads .close::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
  </style>

  <script src="plugin/js/jparticle.js"></script>
  <script>
    $(function () {
      $("h1").jParticle({
        particlesNumber:50,
        background: "#000",
        color: "#fff"
      });
      $(".wb-plugin h2").click(function () {
        $(this).toggleClass("cur").siblings(".wb-info").stop().slideToggle();
      });
      // Loading
      $("html").addClass("noscroll");
      $(".i-banner img:eq(0)").on("load",function() {
        remove();
      });
      setTimeout(function () {
        remove();
      }, 800);
      function remove(){
        $(".loading-w").fadeOut();
        $("html").removeClass("noscroll");
      }
    });
  </script>
  
</body>

</html>